<template>
  <!-- <Spin v-if="loading" fix></Spin> -->
  <div class="slider">
    <Menu ref="leftMenu" :theme="theme2" mode="vertical" :open-names=[open] :active-name="active" width="200" accordion>
      <Submenu :name="`${index}`" :key="item.id" v-for="(item,index) in data2">
        <template slot="title">
          <Icon :type="item.functionIntroduce"></Icon>
          {{item.functionName}}
        </template>
        <MenuItem :name="`${index}-${index1}`" :key="item1.id" v-for="(item1,index1) in item.children">
        <router-link :to="item1.functionUrl">
          <span @click="saveOpenActive(`${index}`,`${index1}`)"></span>
          {{item1.functionName}}
        </router-link>
        </MenuItem>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme2: "light",
      data2: [],
      loading: true,
      open: ["0"],
      active: "0-0"
    };
  },
  created() {},

  mounted() {
    this.initData();
  },
  methods: {

    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },
    saveOpenActive(open, active) {
      localStorage.setItem("open", open);
      localStorage.setItem("active", active);
    },
    OpenActive() {
      let open = localStorage.getItem("open");
      let active = localStorage.getItem("active");
      this.open = '["${open}"]';
      this.active = '${open}-${active}';
      this.$nextTick(function() {
        this.$refs.leftMenu.updateOpened();
        this.$refs.leftMenu.updateActiveName();
      });
    },
    initData() {
      const self = this;
      self.data2 = [];
      this.$http
        .post("/api/auth/sysfun/doGetFunctionListByUserId", {
          userId: localStorage.getItem("userId")
        })
        .then(res => {
          
          console.log(res.retBody);

          let list = res.retBody;


          list.forEach(function(item) {
            item.children = [];
            item.expand = true;
            if (item.parentId == 0) {
              self.data2.push(item);
              item.title = item.functionName;
              self.data2.forEach((item1, index1) => {
                list.forEach(item2 => {
                  if (item1.id == item2.parentId) {
                    item2.title = item2.functionName;
                    if (
                      item.hasOwnProperty("children") &&
                      item1.children.indexOf(item2) == -1
                    ) {
                      item1.children.push(item2);
                    }
                    item1.children.forEach((item3, index2) => {
                      list.forEach(item4 => {
                        if (item3.id == item4.parentId) {
                          item4.title = item4.functionName;
                          if (
                            item3.hasOwnProperty("children") &&
                            item3.children.indexOf(item4) == -1
                          ) {
                            item3.children.push(item4);
                          }
                        }
                      });
                    });
                  }
                });
              });
            }
          });
          this.OpenActive();
          let routePath = self.$route.path;
          let itemPath = self.data2[0].children[0].functionUrl;
          if (routePath == itemPath || routePath == "/home") {
            self.$router.push({ path: itemPath });
          }
          this.loading = false;
        })
        .catch(e => {

          console.log(e);

          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.slider {
  width: 200px;
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0;
  overflow: auto;
  background: #eaeff2;
}
.ivu-menu a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 14px 0;
}
/* .ivu-menu-item-active.ivu-menu-item-selected a {
  color: #2d8cf0;
} */
.ivu-menu .ivu-menu-item {
  padding: 0 24px;
  position: relative;
}
.ivu-menu .ivu-menu-item span {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>